<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <CommonCard title="今日交易用户数" :value="orderUser!">
      <template #default>
        <v-chart :option="option()" autoresize></v-chart>
      </template>
      <template #bottom>
        <span>退货率</span>
        <span>{{ returnRate }}</span>
      </template>
    </CommonCard>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "TodayUsers",
});
</script>

<script setup lang="ts">
import { computed } from "vue";
import CommonCard from "./CommonCard.vue";
import useReportDataStore from "@/stores/reportData";

const reportDataStore = useReportDataStore();

const orderUser = computed(() => reportDataStore.reportData?.orderUser);
const returnRate = computed(() => reportDataStore.reportData?.returnRate);
const orderUserTrend = computed(
  () => reportDataStore.reportData?.orderUserTrend
);
const orderUserTrendAxis = computed(
  () => reportDataStore.reportData?.orderUserTrendAxis
);

const option = () => {
  return {
    xAxis: {
      type: "category", // 类目轴
      data: orderUserTrendAxis.value, // 数据
    },
    yAxis: {
      type: "value", // 类目轴
      show: false,
    },
    series: [
      {
        name: "今日交易用户数",
        type: "bar", // 柱状图
        data: orderUserTrend.value, // 数据
        barWidth: "60%",
        itemStyle: {
          color: "orange",
        },
      },
    ],
    //图标距离容器四周的距离
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {
      trigger: "axis",
      // confine: true,
      position: function (
        point: any,
        param: any,
        dom: any,
        rect: any,
        size: any
      ) {
        let x = 0;
        let y = 0;
        // 获取鼠标在图中X轴y轴位置
        const pointX = point[0];
        const pointY = point[1];

        // 获取图的宽高
        const boxWidth = size.contentSize[0];
        const boxHeight = size.contentSize[1];
        if (boxWidth > pointX) {
          x = 5;
        } else {
          x = pointX - boxWidth;
        }
        y = pointY - boxHeight;
        return [x, y-10];
      },
    },
  };
};
</script>

<style scoped></style>
